import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:guochaoapp/controller/shopping/shopping_controller.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:guochaoapp/model/cart_entity.dart';
import 'package:guochaoapp/routes/app_pages.dart';

import '../../r.dart';

class GCShoppingPage extends StatefulWidget {
  @override
  _GCShoppingPageState createState() => _GCShoppingPageState();
}

class _GCShoppingPageState extends State<GCShoppingPage>{

  final c = Get.put(GCShoppingController());

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder(
            future: c.requestInitData(),
            builder: (context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return Obx(() => _initSubviews());
              }
              return Text('Loading...');
            }));
  }

  _initSubviews() {
    return GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          // 触摸收起键盘
          c.submitChange();
          FocusScope.of(Get.context).requestFocus(FocusNode());
        },
        child: Column(
          children: [
            SizedBox(
                height: ScreenUtil().statusBarHeight + ScreenUtil().setSp(10)),
            _getTopView(),
            _getCartView(),
            _getSettleView(),
            _getEmptyView(),
          ],
        ));
  }

  _getListView(x) {
    CartData item = c.cartList[x];
    double childHeight = item.itemList.length * 60.0;
    return Column(
      children: [
        Container(
            color: Color(0xFF40A8B3),
            height: ScreenUtil().setSp(52),
            margin: EdgeInsets.only(
                left: ScreenUtil().setSp(8),
                right: ScreenUtil().setSp(8),
                top: ScreenUtil().setSp(2)),
            child: Row(
              children: [
                // SizedBox(width: ScreenUtil().setSp(14)),
                GestureDetector(
                    onTap: () => c.check(item, x),
                    child: Container(
                        height: 52,
                        width: 40,
                        color: Colors.transparent,
                        child: Center(
                            child: Image.asset(
                                item.checked
                                    ? R.assetsIconWhiteRadioChecked
                                    : R.assetsIconWhiteRadio,
                                height: ScreenUtil().setSp(16),
                                width: ScreenUtil().setSp(16))))),
                // SizedBox(width: ScreenUtil().setSp(10)),
                Text(
                  item.categoryName + " | ",
                  style: TextStyle(
                      color: Colors.white, fontSize: ScreenUtil().setSp(16)),
                ),
                Opacity(
                  opacity: 0.69,
                  child: Text(
                    "共${item.skuCount}种${item.skuNumCount}${item.unit}",
                    style: TextStyle(
                        color: Colors.white, fontSize: ScreenUtil().setSp(14)),
                  ),
                ),
                Expanded(child: SizedBox()),
                GestureDetector(
                    onTap: () => c.expand(x),
                    child: Container(
                      height: 52,
                      width: 60,
                      color: Colors.transparent,
                      child: Center(
                        child: Image.asset(
                            item.expand
                                ? R.assetsIconArrowUp
                                : R.assetsIconArrowDown,
                            height: ScreenUtil().setSp(16),
                            width: ScreenUtil().setSp(16)),
                      ),
                    )),
              ],
            )),
        Offstage(
            offstage: !item.expand,
            child: Container(
                color: Colors.white,
                height: ScreenUtil().setSp(childHeight),
                margin: EdgeInsets.only(
                    left: ScreenUtil().setSp(8), right: ScreenUtil().setSp(8)),
                child: ListView.builder(
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemCount: item.itemList.length,
                    itemBuilder: (BuildContext context, int y) {
                      return _getListItemView(item, x, y);
                    }))),
      ],
    );
  }

  _getListItemView(CartData data, int x, int y) {
    CartDataItemList item = data.itemList[y];
    return Container(
      height: ScreenUtil().setSp(60),
      padding: EdgeInsets.only(top: 5, bottom: 4),
      child: Column(children: [
        // SizedBox(height: ScreenUtil().setSp(9)),
        Row(
          children: [
            // SizedBox(width: ScreenUtil().setSp(15)),
            GestureDetector(
                onTap: () => c.itemCheck(data, item, y),
                child: Container(
                    width: 40,
                    height: 22,
                    color: Colors.transparent,
                    child: Center(
                      child: Image.asset(
                        item.checked
                            ? R.assetsIconGreenRadioChecked
                            : R.assetsIconGreenRadio,
                        height: ScreenUtil().setSp(14),
                        width: ScreenUtil().setSp(14),
                      ),
                    ))),
            // SizedBox(width: ScreenUtil().setSp(4)),
            Container(
                padding: EdgeInsets.only(
                    left: ScreenUtil().setSp(2), right: ScreenUtil().setSp(2)),
                color: Color(0xFF40A8B3),
                child: Text(
                  "${item.brandName}",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: ScreenUtil().setSp(12),
                  ),
                )),
            SizedBox(width: ScreenUtil().setSp(4)),
            Text("${item.mallTitle}",
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(12),
                )),
            Expanded(child: SizedBox()),
            Opacity(
                opacity: 0.8,
                child: Text(
                  "单价: ￥${item.price}",
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(12),
                  ),
                )),
            SizedBox(width: ScreenUtil().setSp(10)),
          ],
        ),
        SizedBox(height: ScreenUtil().setSp(8)),
        Row(
          children: [
            SizedBox(width: 40),
            Text("规格:${item.skuSpec}",
                style: TextStyle(
                    fontSize: ScreenUtil().setSp(12),
                    fontWeight: FontWeight.bold)),
            Expanded(child: SizedBox()),
            GestureDetector(
              onTap: () => c.cartSub(x, y, item),
              child: Container(
                  width: 30,
                  height: 20,
                  color: Colors.transparent,
                  child: Align(child: Text("-"))),
            ),
            Container(
              width: ScreenUtil().setSp(35),
              height: ScreenUtil().setSp(21),
              color: Color(0xFFECECEC),
              child: TextFormField(
                onChanged: (v) => c.changeNum(v, x, y, item),
                controller: c.textEditingControllers[x][y],
                onFieldSubmitted: (v) => c.directSubmitChange(v,item),
                keyboardType: TextInputType.numberWithOptions(decimal: true),
                style: TextStyle(fontSize: ScreenUtil().setSp(12)),
                textAlign: TextAlign.center,
                onTap: () {
                  c.recordOriginNum(item.num);
                },
                maxLines: 1,
                maxLength: 4,
                decoration: new InputDecoration(
                  // contentPadding: EdgeInsets.only(left: 10, bottom: 15),
                  border: InputBorder.none,
                  fillColor: Colors.white,
                  counterText: "",
                ),
              ),
            ),
            // SizedBox(width: ScreenUtil().setSp(4)),
            GestureDetector(
              onTap: () => c.cartAdd(x, y, item),
              child: Container(
                  width: 30,
                  height: 20,
                  color: Colors.transparent,
                  child: Align(child: Text("+"))),
            ),
            GestureDetector(
                onTap: () => c.cartDelete(item),
                child: Container(
                  width: 20,
                  height: 20,
                  color: Colors.transparent,
                  child: Image.asset(R.assetsIconCartDelete,
                      height: ScreenUtil().setSp(18),
                      width: ScreenUtil().setSp(18)),
                )),
            SizedBox(width: ScreenUtil().setSp(10)),
          ],
        )
      ]),
    );
  }

  _getTopView() {
    return Container(
        child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
      SizedBox(width: ScreenUtil().setSp(15)),
      Image.asset(R.assetsIconApp,
          height: ScreenUtil().setSp(26), width: ScreenUtil().setSp(23)),
      SizedBox(width: ScreenUtil().setSp(8)),
      Text("购物车",
          style: TextStyle(
              fontSize: ScreenUtil().setSp(16), fontWeight: FontWeight.bold)),
      Expanded(child: SizedBox()),
      Opacity(
          opacity: 0.8,
          child: Text("共${c.skuTotal}种产品",
              style: TextStyle(fontSize: ScreenUtil().setSp(12)))),
      SizedBox(width: ScreenUtil().setSp(16)),
    ]));
  }

  _getSettleView() {
    return Offstage(
        offstage: c.cartList.length == 0,
        child: Container(
          height: ScreenUtil().setSp(43),
          color: Colors.white,
          child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
            SizedBox(width: 10),
            GestureDetector(
                onTap: () => c.checkAll(),
                child: Container(
                  width: 30,
                  height: 43,
                  color: Colors.transparent,
                  child: Center(
                      child: Image.asset(
                          c.checkAllSelected.value
                              ? R.assetsIconGreenRadioChecked
                              : R.assetsIconGreenRadio,
                          height: ScreenUtil().setSp(16),
                          width: ScreenUtil().setSp(16))),
                )),
            Text(
              "全选",
              style: TextStyle(fontSize: ScreenUtil().setSp(12)),
            ),
            SizedBox(width: ScreenUtil().setSp(8)),
            Text(
              "总计:￥${c.checkedMoney()}",
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(14),
                  fontWeight: FontWeight.bold),
            ),
            Text(
              "(${c.checkedWeight()})",
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(14),
                  fontWeight: FontWeight.bold,
                  color: Colors.red),
            ),
            Expanded(child: SizedBox()),
            Container(
              height: ScreenUtil().setSp(29),
              width: ScreenUtil().setSp(74),
              margin: EdgeInsets.only(bottom: ScreenUtil().setSp(2)),
              child: RaisedButton(
                child: Text("结算"),
                color: Color(0xFF40A8B3),
                textColor: Colors.white,
                onPressed: () {
                  c.settle();
                },
              ),
            ),
            SizedBox(width: ScreenUtil().setSp(16)),
          ]),
        ));
  }

  _getCartView() {
    return Expanded(
        child: Offstage(
      offstage: c.cartList.length == 0,
      child: ListView.builder(
          itemCount: c.cartList.length,
          itemBuilder: (BuildContext context, int index) {
            return _getListView(index);
          }),
    ));
  }

  _getEmptyView() {
    return Offstage(
        offstage: c.cartList.length > 0,
        child: Container(
            width: ScreenUtil().screenWidth,
            height: ScreenUtil().screenHeight -
                ScreenUtil().statusBarHeight -
                ScreenUtil().bottomBarHeight -
                ScreenUtil().setSp(100),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  R.assetsIconEmptyCart,
                  width: ScreenUtil().setSp(128),
                  height: ScreenUtil().setSp(100),
                ),
                SizedBox(height: 30),
                Container(
                  height: ScreenUtil().setSp(29),
//                  width: ScreenUtil().setSp(74),
                  margin: EdgeInsets.only(bottom: ScreenUtil().setSp(2)),
                  child: RaisedButton(
                    child: Text("去看看",
                        style: TextStyle(fontSize: ScreenUtil().setSp(14))),
                    color: Color(0xFF40A8B3),
                    textColor: Colors.white,
                    onPressed: () {
                      c.toMall();
                    },
                  ),
                ),
              ],
            )));
  }
}
